Membuat tampilan dari homepage 

Pertama buat app bar dari scaffold di homepage 
appBar: myAppbar , 

lalu bikin di atas return 

AppBar myAppbar = Appbarttitle: Text( “Catatan ku”), 
centerTitle: true, //tengah 

elevation: 0 //agarshadow hilang 

backgroundColor: Colors.transparant, 

); 

Aplikasi ada diatas tampilan ada judul 


Membuat mediaquery 
Untuk lebih layout responsive 
Dibawah appbar 


Double heighBody = MediaQuery.of(context).size.height - //ini seluruh layar 
myAppbar.preferredSize.height - //tinggi appbar 
MediaQuery.of(context).padding.top; // diatas appbar 


Kemudian 
Lebar nya 
Double widthBody = MediaQuery.of(context).size.width; 


Kemudian sudah dapat tinggi sama lebar 
Coba di print nilainya 

Ditext 

heightBody.toString(), // ini sudah dapat tinggi 


berikutnya buat 
search box 
checkbox 
untuk body tidak pakai center dihapus 
ganti column( 
children:[ 
Container( 
Padding: Edgelnsert.all(28), 
Width: widthBody, 
Height: heightBody * 0.2, //untuk mengambil 2% tingginya 
Color: Colors.amber, //untuk melihat //lalu color dikomentarkan 
Child: textField( 
Decoration: InputDecoration( 
Border: OutlinelnputBorder(), //maka seudah jadi search boxnya 
Kemudian tambahkan icon 
prefixlcon: Icon(lIcons.search), //maka muncul icconya 
tambahkan text 
hintText: “Cari apa ” // maka search box sudah ada 
kemudian buat list checkboxnya 


), 


) 


Lalu bikin container juga sisa nya 0,8 
Container( 


Padding: Edgelnsets.symmetric() //horizontal kanan kiri 
Height: heightBody * 0.8, 
Width: widthBody, //seprti biasa 
Color: colors.amber, //lihat tes ukurannya untuk list 
Bikin padding 
Child checkbox dahulu 
Child: CheckboxListtile( //ini meminta value sama 
Value: varSementara, 
//buat dahulu variable sementara diluar context 
Bool varSementara = true: 
onChanged: (value){}, //untuk sementara 
dan ada juga title 
title: Text( “Judul”), //diatas value 
subtitle: Text( “sub Judul”), 
// maka hasil berbentuk check box 
/Imisalkan ada data2 yg udah dikerjakan maka cocok ada checkboxlisttile 
Kemudian ada 
controlAffinity: ListtileControlAffinity.leading //diatas title 
kalau leading maka check pindah ke kiri tapi defaultnya platform kanan 
selanjut nya ada secondary membuat icon berwarna merah 
secondary: Icon(icons.delete, color: Colors.red), //diatas leading 
tidak pakai padding agar jarak tidak terlalu semping dikomentar 
bukan check nya tapi memkai listview 
sebelumnya di cut 
child: ListView.builder(itemBuilder: ((context), index) 
return lalu paste 
/Imaka banyak checkbox tapi kebanyakan 
Buat sedikit 
itemCount: 10, //diatas itembuilder 
maka sudah jadi 
kemudian title buat lebih besar 
, Style: textStyle(fontSize: 18), /maka cukup 
Checkbox belum berfungsi 
Secondary tidak usah pakai icon karna nanti bisa diklik maka pakai botton 
IconButton(onPressed: (){}, Icon: Icon(Icons.delete, color: Colors.red)), 
Maka sama saja tapi bisa diklik 


Maka cukup sekiap tampilan ini 

Tapi search lebih panjang 

Kita buat 0415 dia kurangi 5 karna awal 2 
Jadi dibawah tambah 85 

Agar tidak lebih berjarak 


Ini ketika kia search maka ada eror 

Maka hal harus yg kita lakukan kita tmabhakan conainer 1 karna textfield 
Dicontainer 1 

Klik kanan refactor swap[ widget. Swap widget diubah 
SingleChildScrollView() 

Teryata masih jadi bukan disini 

Berarti colum nya kita buat column nya 

Swap widget ubah sigleChildScrollViewl() 

Maka sudah hilang 


Berikutnya membuat data lalu dicopy ke tampilan 


